<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta title="文章详情">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/home.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/home.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/jQuerySinaEmotion/jquery.sinaEmotion.css" />

<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/page/third/jquerytime/js/jquery.min_v1.0.js" type="text/javascript"></script>
<style>
.article-header {
	margin-bottom: 12px;
	padding: 10px 0;
	text-align: center;
}

.article-title {
	margin-top: 0;
	font-size: 26px;
	line-height: 36px;
	font-weight: 500;
}

.article-keyword {
	font-size: 13px;
	color: #999;
	text-align: center;
}

.article-meta {
	font-size: 14px;
	color: #999;
	text-align: right;
	padding:40px 0;
	position: relative;
}

.praise {
	color: red;
	display: none;
	position: absolute;
	right: 61px;
	top: 5px;
}
.article-meta i:hover{
	cursor: pointer;
}
.article-near {
	margin-top:25px;
    padding: 25px 0;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}
.article-near>p{
text-align: left;

}
.repliestitle{
    font-size: 10px;
    padding-top: 6px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    line-height: 30px;
    height: 37px;
    background-color: #fff;
}
 .addcomment {
    padding-left: 22px;
    height: 16px;
    line-height: 16px;
    display: block;
    font-size: 11px;
    float: left;
    margin-right: 15px;
}
 a.curtab {
    background: #FCFCFC;
    border: 1px solid #CCC;
    border-bottom-color: #FCFCFd;
}
 a.curtab {
    padding: 0px 10px;
    margin-bottom: -1px;
    display: block;
    float: right;
    color: #555;
    text-decoration: none;
    border: 1px solid #CCC;
    border-bottom-color: #FCFCFd;
    margin-right:10px;
}
.comment{
padding-right:5px;
padding-top:5px;
font-size:14px;
}
.commentlistzone{
	margin-top:20px;
}
.commentlist .comment-body .comment-meta {
    background: #f1f5f8;
    position: relative;
    height: auto;
    min-height: 37px;
    line-height: 37px;
    padding-left: 45px;
}
.commentlist .comment-body .comment-meta img {
    background-color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    position: absolute;
    display: block;
    left: -40px;
    top: 10px;
    margin: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.commentlist li {
    margin: 10px 0 10px 0;
    list-style: none;
    border: 2px solid #f1f5f8;
    padding: 2px;
    background-color: #fff;
    border-radius: 4px;
}

.commentlist .comment-body .comment-metadata {
    text-transform: uppercase;
    float: right;
    margin-right: 10px;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}
.commentlist .comment-body .comment-content {
    padding: 20px 55px 30px 45px;
    position: relative;
}
.respond{
    padding: 20px 55px 30px 55px;
    position: relative;
}
.comment-reply-link{
    position: absolute;
    bottom: 3px;
    right: 12px;
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    color: #3d4450;
}
.respond .row {
    margin-bottom: 6px;
}
#emoticon {
    float: left;
    padding-left: 2px;
    position: absolute;
    left: 50px;
    bottom: 75px;
    z-index: 99;
}
#emoticon .emoticon-icon {
    width: 22px;
    height: 22px;
    background: url(${pageContext.request.contextPath}/page/image/bq.png) no-repeat;
    cursor: pointer;
    display: block;
}
.comment-reply-link:hover{
	cursor: pointer;
	color: #337ab7;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
$(function() {
	$(document).scroll(function() {
		var window_H = $(window).height();
		// 当屏幕滚出第一屏时，我们让这个按钮出现。
		var h2 = $(document).scrollTop();
		// 判断
		if (h2 >= window_H) {
			// 当第一屏即将要滚出去的时候我们要显示返回顶部按钮
			$('.back_top').css('display', 'block');
		} else {
			$('.back_top').fadeOut(400);
		}
	});
	// 点击图片按钮的时候让我们的页面返回到顶部
	$('.back_top').click(function() {
		$('html,body').animate({
			'scrollTop' : 0
		});
	});
	$('.back_top').hover(function() {
		$('.back-to-top').hide();
		$('#back_top_font').show();
	}, function() {
		$('.back-to-top').show();
		$('#back_top_font').hide();
	});
	$("#my_words").jQCloud(word_list);
	//点赞
	$("#praise").click(function() {
		if($('#praise').attr("class")!='icon-heart'){
			var url="${pageContext.request.contextPath}/home/addArticlePraise.do?"+(new Date()).getTime();
			$.ajax({
				url:url,
				dataType:'json',
				type:'post',
				data:{'articleid':$("#hideid").val()},
				success:function(data){
					if(data.praise!=null){
						$("#praisecount").html(data.praise);
					}
				}

			})	
			$('#praise').attr("class", "icon-heart");
			$("#zan").show(500);
			setTimeout(function() {
				$("#zan").css("display", "none");
			}, 1000)
		}
	})
	getCommentsArea();


});
//加载评论
function getCommentsArea(){
	var url="${pageContext.request.contextPath}/comment/goCommentsList.do?"+(new Date()).getTime();
	$.ajax({
		url:url,
		dataType:'html',
		type:'post',
		data:{'articleId':$("#hideid").val()},
		success:function(data){
				$(".commentlist").html(data);
		}
	});		
} 	
</script>
</head>
<body class="nav-fixed">
	<!--导航条  -->
	<jsp:include page="/WEB-INF/mypage/website/home_nav.jsp"></jsp:include>

	<!--主页面  -->
	<div id="zyn-bodyer"></div>
	<div class="container theme-showcase" role="main">
		<div class='col-md-9 main'>
			<!--面包屑导航  -->
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">2013</a></li>
				<li class="active">十一月</li>
			</ol>
			<article class="article  well">
				<header class="article-header">
					<h1 class="article-title">
						<a href="">${mblog.title }</a>
					</h1>
					<input type="hidden" value="${mblog.id}" id="hideid"/>
					<!--//文章关键词 上面放关键词,文章最下面放阅读、评论、点赞 -->
					<div class="article-keyword">
						关键词： <span class="item">${mblog.keyword}</span>
					</div>
				</header>
				<article class="article-content">
					<hr style="margin: 0px 0px 15px 0px">
					${mblog.content }
				</article>
				<div class="article-meta">
					<span class="praise" id="zan">+1</span>
					<span class="item"><fmt:formatDate pattern="yyyy/MM/dd hh:mm:ss" value="${mblog.releasedate}"></fmt:formatDate></span> <span class="item"><i
						class="icon-eye-open" style="color: #45bcf9;"></i>浏览（<a href="#">${mblog.scans}</a>）</span>
					<span class="item commentcount"><i class="icon-comment-alt"
						style="color: #45bcf9;"></i>评论（<a href="#">${mblog.comments}</a>）</span> <span
						class="praisebtn"> <i class="icon-heart-empty"
						style="color: #ff5e5c;" id="praise"></i> 赞（<a data-id="1" id="praisecount"
						praise-flag="0" href="#">${mblog.replies}</a>）
					</span>
					<section class="article-near ">
					     <p>上一篇:
					     	<c:if test="${preblog!=null}">
					     		 <a href="${pageContext.request.contextPath}/home/goArticleDetails.do?articleid=${preblog.id}" title="${preblog.title}">${preblog.title}</a>					     	
					     	</c:if>
					     	<c:if test="${preblog==null}">
					     		已是最旧的文章				     	
					     	</c:if>
						 </p>
					     <p>下一篇:
					     	<c:if test="${nextblog!=null}">
					     		 <a href="${pageContext.request.contextPath}/home/goArticleDetails.do?articleid=${nextblog.id}" title="${nextblog.title}">${nextblog.title}</a>					     	
					     	</c:if>
					     	<c:if test="${nextblog==null}">
					     		已是最新的文章				     	
					     	</c:if>
					     </p>
					</section>				
        		</div>
			</article>
			
				<div class="commentmain">
					<div class="repliestitle">
						<a  class="curtab" href="javascript:void(0);">评论 (26)</a>
						<span class="addcomment"><a href="#respond"><i class="glyphicon glyphicon-comment comment" style="top: 4px;"></i>发表评论</a></span>
					</div>	
					<!--评论  -->
					<div class="commentlistzone">
						<ol class="commentlist">
							<li id="comment-4" class="comment even thread-even depth-1 parent">
								<article id="div-comment-4" class="comment-body">
									<footer class="comment-meta">
										<div class="comment-author vcard">
											<img src="http://o82pwjziv.bkt.clouddn.com/HeadIcon/20160619/6360193403816061146452898.jpg" class="avatar avatar-70 photo" height="60" width="60">
												<b class="fn">
													<a href="" rel="external nofollow" class="floor">小炜</a>
												</b>&nbsp;&nbsp;&nbsp;&nbsp;
												<a style="color:rgba(0, 39, 59, 0.35);" href=""><time datetime="2016/6/24 9:35:16">2016/6/24 9:35:16</time></a>
										 		<div class="comment-metadata" style="color:#D2322D">#1</div>
										 </div>
									</footer>
									<div class="comment-content">
										<p>6666！好牛呀！我现在转前端了，有空咱交流交流吧！</p>
										<div class="reply">
											<a class="comment-reply-link" >回复</a>
										</div>										
									</div>								
								</article>
							</li>	
							<li id="comment-4" class="comment even thread-even depth-1 parent">
								<article id="div-comment-4" class="comment-body">
									<footer class="comment-meta">
										<div class="comment-author vcard">
											<img src="http://o82pwjziv.bkt.clouddn.com/HeadIcon/20160619/6360193403816061146452898.jpg" class="avatar avatar-70 photo" height="60" width="60">
												<b class="fn">
													<a href="" rel="external nofollow" class="floor">小炜</a>
												</b>&nbsp;&nbsp;&nbsp;&nbsp;
												<a style="color:rgba(0, 39, 59, 0.35);" href=""><time datetime="2016/6/24 9:35:16">2016/6/24 9:35:16</time></a>
										 		<div class="comment-metadata" style="color:#D2322D">#1</div>
										 </div>
									</footer>
									<div class="comment-content">
										<p>6666！好牛呀！我现在转前端了，有空咱交流交流吧！</p>
										<div class="reply">
											<a class="comment-reply-link" >回复</a>
											
										</div>										
									</div>
								
								</article>
							</li>	
						</ol>
					</div>		
					</div>	
				<!--回复 -->
					<div class="respond">
					<form>
						<div id="author_info">
							<div class="row">
								<label for="author" class="small">昵称 (*) :</label>
								<div class="input-group">
									<div class="input-group-addon comment-name">
										<span class="glyphicon glyphicon-user " ></span>
									</div>
									<input type="text" name="author" id="author" class="form-control" style="width: 40%" value="" size="24" tabindex="1">
								</div>
							</div>
							<div class="row">
								<label for="email" class="small">电子邮箱 (*) :</label>
								<div class="input-group">
									<div class="input-group-addon comment-name">
										<span class="glyphicon glyphicon-envelope " ></span>
									</div>							
									<input type="text" name="email" id="email" class="form-control" style="width: 40%" value="" size="24" tabindex="2">
								</div>
							</div>
							<div class="row" >
								<label for="author" class="small">评论内容 (*) :</label>
								<textarea name="comment" id="comment" tabindex="4" rows="8" cols="125" style="width:99%;"></textarea>
								<div id="emoticon">
									<span class="emoticon-icon face" ></span>
								</div>
							</div>
							<div type="hidden" id="cmtcontent" style="display: none;"></div>
							<input type="hidden" id="hideblogid" val="${mblog.id}"/>
							<input type="hidden" id="hidecommentid" val="0"/>
						</div>
							<!-- comment submit and rss -->
							<div id="submitbox">
								<div class="submitbutton">
									<input name="submit" type="button" id="submit" class="button" tabindex="5" value="提交评论 (Ctrl+Enter)" >
								</div>

							</div>
					</form>					
						</div>				
		</div>
		<div class='col-md-3 sidebar'>
			<!--侧边栏目  -->
			<jsp:include page="/WEB-INF/mypage/website/aside.jsp"></jsp:include>
		</div>
	</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/page/third/jQuerySinaEmotion/jquery.sinaEmotion.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
 jq(function(){
	jq("#comment").change(function(){

	})
}) 

//$('#result').html(content).parseEmotion();对评论内容进行解析生成img标签
//可以写隐藏div保存评论内容字段
jq('.face').bind({
	click: function(event){
		if(! jq('#sinaEmotion').is(':visible')){
			jq(this).sinaEmotion();
			event.stopPropagation();
		}
		
	}
});  

</script>
</html>
